<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>FancyBox 1.3.1 | Demonstration</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
	<script type="text/javascript" src="js/pngobject.js"></script>
 	<link rel="stylesheet" href="style/style.css" type="text/css" />
	<link rel="stylesheet" href="style/jquery.fancybox-1.3.1.css" type="text/css" />
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			*   Examples - images
			*/

			$("a#example1").fancybox({
				'titleShow'		: false
			});

			$("a#example2").fancybox({
				'titleShow'		: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});

			$("a#example3").fancybox({
				'titleShow'		: false,
				'transitionIn'	: 'none',
				'transitionOut'	: 'none'
			});

			$("a#example4").fancybox();

			$("a#example5").fancybox({
				'titlePosition'	: 'inside'
			});

			$("a#example6").fancybox({
				'titlePosition'	: 'over'
			});

			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});

			/*
			*   Examples - various
			*/

			$("#various1").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});

			$("#various2").fancybox();

			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});

			$("#various4").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
	</script>
</head>
<body>
<div id="content">
	<h4>jQuery FancyBox 实现点击小图显示大图</h4>
	<p>
		<a rel="example_group" href="example/4_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="example/4_s.jpg" /></a>

		<a rel="example_group" href="example/5_b.jpg" title=""><img alt="" src="example/5_s.jpg" /></a>

		<a rel="example_group" href="example/6_b.jpg" title=""><img alt="" src="example/6_s.jpg" /></a>
	</p>
	<p>
		<a rel="example_group" href="example/7_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="example/7_s.jpg" /></a>

		<a rel="example_group" href="example/8_b.jpg" title=""><img alt="" src="example/8_s.jpg" /></a>

		<a rel="example_group" href="example/9_b.jpg" title=""><img alt="" src="example/9_s.jpg" /></a>
	</p>
</div>
<div><p>&nbsp;</p></div>
</body>
</html>
